<script setup lang="ts">
import {ref} from "vue";
import '@lrc-player/core/dist/style.css'
import Player from '@lrc-player/core'
import {getLyric, getMusicUrl} from "@/api/musicList";


console.log('document.querySelector(\'.test\')', document.querySelector('.test123'))
const audio = ref<HTMLAudioElement>()
const url = ref('')
const id = '186045'

function isPlaying(audioElement: HTMLAudioElement | null): boolean {
  if (!audioElement) return false;
  return !audioElement.paused && audioElement.currentTime > 0 && !audioElement.ended;
}

const player = ref({})
const init = async () => {
  const res = await getMusicUrl(id)
  url.value = res.data[0].url

  const res2 = await getLyric(id)

  player.value = new Player(document.querySelector('.test123'))
  player.value.updateAudioUrl(url.value, res2.yrc.lyric)
  player.value.updateVolume(0.5)
}
init()


</script>

<template>
  <div class="test123"></div>
  <BaseButton @click="player.pause">暂停</BaseButton>
  <BaseButton @click="player.play">开始</BaseButton>
</template>

<style lang="less">

</style>
